<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nodeName和tagName的区别</title>
</head>
<body>
    <div id="app">
        后盾人
        <!-- hdms -->
    </div>
    <script>
        const div  = document.querySelector("#app");
        // 标签
        console.log(div);
        console.log(div.nodeType);
        console.log(div.nodeName);
        console.log(div.tagName);

        // 属性
        console.log(div.attributes.id);
        console.log(div.attributes.id.nodeType);
        console.log(div.attributes.id.nodeName);
        console.log(div.attributes.id.tagName);

        // 文本
        console.log(div.childNodes[0]);
        console.log(div.childNodes[0].nodeType);
        console.log(div.childNodes[0].nodeName);
        console.log(div.childNodes[0].tagName);

        // 注释
        console.log(div.childNodes[1]);
        console.log(div.childNodes[1].nodeType);
        console.log(div.childNodes[1].nodeName);
        console.log(div.childNodes[1].tagName);
    </script>
</body>
</html>